<template>

  <div>

    <el-card class="box-card">
      <h3>考试通登录入口</h3>
      <!-- :model -> 必要属性, 重置表单使用 -->
      <el-form :model="loginForm" ref="form" status-icon label-width="100px" class="demo-ruleForm">
        <!-- prop -> 必要属性, 重置表单使用 -->
        <el-form-item label="登陆账号" prop="uniqueID">
          <el-input type="text" v-model="loginForm.uniqueID" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="登录密码" prop="password">
          <el-input type="password" v-model="loginForm.password" autocomplete="off" @keyup.enter.native="loginFun"></el-input>
        </el-form-item>
        <el-form-item class="button">
          <el-link type="info" @click="orderDialogFormVisible = true">考试预约</el-link>
          <el-button @click="resetForm">重置</el-button>
          <el-button type="primary" @click="loginFun">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 考试预约的表单弹窗 -->
    <el-dialog title="考试预约" :visible.sync="orderDialogFormVisible" top="8vh">
      <el-form ref="form" size="mini" :model="orderForm" label-width="80px">
        <el-form-item label="证件号">
          <el-input type="text" v-model="orderForm.uniqueID"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input type="text" v-model="orderForm.username"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="orderDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="orderFun">提 交</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
import { Login, Appointment } from '../api/public.js'
import {Success, Error, Confirm, Info, Alert} from "../utils/element.config.js";

export default {
  data(){
    return {
      orderDialogFormVisible: false,
      orderForm:{
        uniqueID: '',
        username: ''
      },
      loginForm: {
        uniqueID: '',
        password: ''
      }
    }
  },
  methods: {
    /** 预约考试 **/
    orderFun(){

      Confirm("请确认输入的数据信息", "预约确认").then(()=>{
        Appointment(this.orderForm).then(result=>{
          if( result.code === 300 ){
            // 存在
            if( result.data.status ){
              switch (result.data.status){
                case "-1": // 等待预约通过
                case "0": // 预约通过，获取初始化密码
                case "1": // 预约通过
                case "success": // 提交预约成功
                  Alert(result.message);
                  this.orderDialogFormVisible = false;
                  break;
                case "fail": // 提交预约失败
                case "waring": // 数据有误
                  Alert(result.message);
                  break;
                default:
                  Alert("没有状态信息");
                  this.orderDialogFormVisible = false;
                  break;
              }
            }else{
              Alert(result.message);
            }
          }
        })
      }).catch(()=>{
        Info("已取消预约");
      })

    },
    /** 表达提交, 发起请求 **/
    loginFun(){
      /* 数据校验 */
      if( !this.loginForm.uniqueID || !this.loginForm.password )
        return Error("请输入账号或密码");
      /* 发送请求 */
      Login(this.loginForm)
        .then(result => {
          if( result.code === 200 ){
            Success("登陆成功");
            /* 路由跳转 */
            window.sessionStorage['token'] = result['data']['token'];
            return this.$router.push("/index");
          }else{
            return Error(result.message);
          }
        })
    },
    /** 表单信息重置 **/
    resetForm(){
      /* 使用 ElementUI 中 resetFields方法来进行清空表单数据 */
      this.$refs['form'].resetFields();
    }
  },
  watch: {
    orderDialogFormVisible(value){
      if( !value ){ // 清空预约表单
        this.orderForm = {
          uniqueID: '',
            username: ''
        }
      }
    }
  }
}
</script>

<style scoped>
.box-card{
  width: 400px;
  margin: 80px auto;
  text-align: center;
}
.demo-ruleForm{
  width: 350px;
  margin-left: -25px;
  margin-top: 35px;
}
.button /deep/ div{
  margin-left: 38px !important;
}
.button /deep/ .el-form-item__content{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
